<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<style>
* { margin: 0; padding: 0;}
.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: hidden;}
.myscroll li { height: 26px; margin-left: 25px;}
.myscroll a { color: #333; text-decoration: none;}
.myscroll a:hover { color: #ED5565; text-decoration: underline;}
</style>
<div class="bjui-pageContent tableContent">
	<div id="hour_form" style="margin-left:5px;width:600px;height: 280px;float:left;"></div>
<div id="proprotion" style="margin-left:50px;width:400px;height: 280px;float:left;"></div>
<div id="day_form" style="margin-left:5px;width:650px;height: 280px;float:left;"></div>
<div id="scroll_data" style="margin-left:5px;width:400px;height: 241px;float:left;overflow-y:scroll;">
	<table class="table table-bordered">
	     <thead>
	    		<tr style="height:30px;">
		    		<th>订单名称</th>
		    		<th>订单金额</th>
		    		<th>下单时间</th>
	    		</tr>
	    	</thead> 
	    	<tbody>
	    	<c:forEach items="${orders}" var="u">
	    		<tr>
	    			<td>${u.orderName}</td>
	    			<td>${u.paidAccount}</td>
	    			<td><fmt:formatDate type="time" pattern="HH:mm" value="${u.generateTime}" /></td>
	    		</tr>
	    	</c:forEach>
	    	</tbody> 
	    </table>
</div>

<script type="text/javascript">
	console.log("一分钟后刷新");
	var date = new Date();
	console.log(date);
	
	/* var refresh = setTimeout("$(this).navtab('refresh', 'navtab-index')",60000); 
	$(document).on('bjui.beforeCloseNavtab', function(e) {

	    var $navtab = $(e.target);
	    clearTimeout(refresh);
	
	}); */
	$(function() {
		//销售类型占比饼图
		var proprotionChart = echarts.init(document.getElementById("proprotion"));
		var proportion = []; 
		<c:forEach items="${proportion}" var="pv">  
			proportion.push({
				name:'${pv.typeName}',
				value:'${pv.rocordNum}'
			}); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
			
		var proportionLegend =[];
		<c:forEach items="${proportion}" var="pv">  
			proportionLegend.push('${pv.typeName}'); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
			
		proprotionChart.setOption({
			title : {
		        text: '本月销售类型占比',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: proportionLegend
		    },
		    series : [
		        {
		            name: '销售占比',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data: proportion,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		})
		
		//当日销售额报表
		var hourChart = echarts.init(document.getElementById("hour_form"));
		
		//将小时装入
		var day_hour = [];  
		<c:forEach items="${passHourReports}" var="pv">  
			day_hour.push('${pv.time}'+"时"); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
		
		//将每小时的销售额装入
		var day_sales = [];  
		<c:forEach items="${passHourReports}" var="pv">  
			day_sales.push('${pv.price}'); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
		
		hourChart.setOption({
			title : {
		        text: '今日销售额',
		        left: 'center'
		    },
			 tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },
			    legend: {
			        data:['销售额'],
			        left: 'right'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: day_hour,
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '销售额',
			            axisLabel: {
			                formatter: '{value} 元',
			                rotate:30
			            }
			        }
			    ],
			    series: [
			        {
			            name:'销售额',
			            type:'bar',
			            data:day_sales
			        }
			    ]
		});

		//当月销售额报表
		var myChart = echarts.init(document.getElementById("day_form"));
		
		//将日期装入
		var month_day = [];  
		<c:forEach items="${passReports}" var="pv">  
			month_day.push('${pv.time}'+"日"); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
		
		//将每天的销售额装入
		var month_sales = [];  
		<c:forEach items="${passReports}" var="pv">  
			month_sales.push('${pv.price}'); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
		
		//将每天的销售额装入
		var brand_sales = [];  
		<c:forEach items="${passReports}" var="pv">  
			brand_sales.push('${pv.grandPrice}'); //js中可以使用此标签，将EL表达式中的值push到数组中  
		</c:forEach>
		
		myChart.setOption({
			title : {
		        text: '本月销售额',
		        left: 'center'
		    },
			 tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },
			    legend: {
			        data:['销售额','累计销售额'],
			        left: 'right'
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: month_day,
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '销售额',
			            axisLabel: {
			                formatter: '{value} 元',
			                rotate:30
			            }
			        },
			        {
			            type: 'value',
			            name: '销售额',
			            axisLabel: {
			                formatter: '{value} 元',
			                rotate:-30
			            }
			        }
			    ],
			    series: [
			        {
			            name:'销售额',
			            type:'bar',
			            data:month_sales
			        },
			        {
			            name:'累计销售额',
			            type:'line',
			            yAxisIndex: 1,
			            data: brand_sales
			        }
			    ]
		});
	});
</script>         
</div>